<template>
	<div class="x-data-select">
		<div class="el-input el-input-group el-input-group--append">
			<div class="el-input__inner" @click="formInput">
				<el-tag @close="handleClose(tag)" v-for="tag in tags" :key="tag.name" closable :type="tag.type">
					{{tag.name}}
				</el-tag>
			</div>
			<div class="el-input-group__append" @click="formInput">
				<el-button type="primary" icon="el-icon-search">{{title}}</el-button>
			</div>
		</div>

		<el-dialog :title="title" width="70%" v-el-drag-dialog top="5vh" :visible.sync="dialogFormVisible">
			<div v-loading="dataLoading" class="xtable-select">
				<x-table ref="xTable" @afterTableLoad="afterTableLoad" @rowSelect="rowSelect" :isDateSelect="true"></x-table>
			</div>
			<span slot="footer" class="dialog-footer">
				<div class="selectText">{{ selectText }}</div>
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogFormVisible = false">确定选择</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import elDragDialog from '@/service/directives/el-dragDialog'
	import ala from 'ala'
	export default {
		directives: {
			elDragDialog
		},
		model: {
			event: 'change',
			type: {},
			prop: 'dataModel'
		},
		name: 'x-data-select',
		props: {
			type: {
				type: String,
				required: true
			}, //  数据源类型,
			tag: {
				type: String
			}, // 有数据时,在select显示的文字,比如选择为会员admin ，则表单上显示admin
			field: {
				type: String,
				default: 'name'
			}, // 表单选中的字段名称，默认为name
			title: {
				type: String,
				default: '选择数据'
			},
			dataModel: {}
		},
		data() {
			return {
				viewModel: '',
				tags: [], // 已选的数据
				dialogFormVisible: false,
				selectText: '请选择数据',
				dataLoading: false
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				this.setTag(this.tag)
				if (!this.type) {
					this.$ala.alert('请设置控件的数据源')
				}
			},
			rowSelect(data) {
				if (data) {
					this.selectText = '当前选择：' + data[this.field]
					this.setTag(data[this.field])
					this.viewModel = data.id
				}
			},
			setTag(name) {
				this.tags = []
				if (name) {
					var item = {
						name: name,
						type: ''
					}
					this.tags.push(item)
				}
			},
			handleClose(tag) {
				this.tags = []
				this.viewModel = null
			},
			afterTableLoad() {
				this.dataLoading = false
			},
			formInput() {
				this.dataLoading = true
				this.dialogFormVisible = true
				this.$nextTick(() => {
					if (this.$refs.xTable) {
						this.$refs.xTable.init(this.type)
					}
				})
			}
		},
		watch: {
			viewModel: {
				deep: true,
				handler(val) {
					this.$emit('change', this.viewModel)
				}
			}
		}
	}
</script>
<style rel="stylesheet/scss" scoped lang="scss">
	.x-data-select {
		.el-input-group__append {
			width: 150px;
		}

		.cuopoin {
			cursor: pointer;
			text-align: center;
		}

		.text-placeholder {
			color: #c0c4cc;
		}

		.xtable-select {
			max-height: 50vh;
			height: 100%;
			overflow: scroll;
			margin-top: 15px;
			border-bottom: 1px solid #e5e5e5;
		}

		.xtable-select::-webkit-scrollbar {
			width: 5px;
			height: 40px;
		}

		.xtable-select::-webkit-scrollbar-thumb {
			width: 5px;
			background-color: #dcdfe6;
			border-radius: 10px;
		}

		.el-dialog__footer {
			border-top: 1px solid #eaeefb;
		}

		.selectText {
			font-size: 16px;
			font-weight: bold;
			color: #716aca;
			float: left;
		}
	}
</style>